<template>
  <div :class='"hot-selected "+formaltTitle.class'>
    <p class="title-box">
      <span :class="formaltTitle.icon"></span>
      <span class="title">{{formaltTitle.title}}</span>
    </p>
    <div class="list-box ft14">
      <Unit v-for="(item, index) in listData" :key="index" :info="item" />
    </div>
  </div>
</template>
<script>
import Unit from '../common/unit.vue'
export default {
  props:['titleInfo0'],
  components: {Unit},
  name: "",
  data() {
    return {
      titleInfo:{
        icon:"iconfont icon-jingxuan color-yellow mr10",
        title:"精选商品"
      },
      listData:[
        {
          img:"",
          money:"",//价格
          count:"",//销量
          intro:"简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介",//简介
        },{},
      ]
    };
  },
  computed:{
    formaltTitle(){
      return this.titleInfo0 || this.titleInfo
    }
  },
  methods: {
      init(){
          let params={
              currPageNo:1,
              pageSize:4

          }
          _g.apiPost('protalHome/hotProduct.do',params).then(res=>{
              if(res.status==0){
                 this.$set(this,"listData",res.data.list)
              }else{
                  _g.toMessage(res)
              }
          })
      }
  },
  created() {
      this.init()
  }
};
</script>
<style lang="scss" scoped>
.hot-selected {
  margin: 30px 0;
  box-sizing: border-box;
  border: 1px solid #eee;

  .title-box{
    padding: 10px 15px;
    border-bottom: 1px solid #eee;

    .title{
      font-weight: 600;
      color: #666
    }
    span{
      font-size: 20px;
      vertical-align: middle
    }
    span.iconfont{
      font-size: 24px;
    }
  }
  .list-box{
    >div{
      border-top: 1px solid #eee;
    }
    >div:nth-child(1){
      border: none
    }
  }
}
.mt0{
  margin-top: 0;
  border-top: none;

  .title-box{
    border-bottom: none;
  }
}
</style>